<template>
  <div class="Info">
    <!-- 利用输入框绑定的value来判断当前输入框内的内容是否与userinfo内的信息相同来让保存这个字样显示或隐藏 , 保存字样的显示与隐藏由布尔值控制 -->
    <NavBar
      path="/Home/EdiUser"
      :title="title"
      :show="value != oldValue ? true : false"
      @onClick="onClick"
    ></NavBar>
    <div class="middle" v-if="prop !== 'avatar'">
      <van-cell-group>
        <!-- 通过判断打开的是修改昵称,修改个人简介页面还是修改头像页面显示对应的插件 -->
        <!-- 不是打开的修改头像, 显示的是输入框 -->
        <van-field v-model="value" />
      </van-cell-group>
      <!-- 打开的是修改头像,显示的是头像上传框 -->
    </div>
    <div class="footer">
      <van-uploader
        v-model="fileList"
        max-count="1"
        multiple
        v-if="prop === 'avatar'"
        :before-read="beforeRead"
        :after-read="afterRead"
      />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { editUser, uploadFile } from '@/api/editUser.js'

export default {
  computed: { ...mapState(['userInfo']) },
  data () {
    return {
      prop: '',
      title: '',
      value: '',
      oldValue: '',
      fileList: [],
      baseURL: process.env.VUE_APP_BASEURL
    }
  },
  mounted () {
    //修改头像显示默认头像
    this.fileList.push({ url: `${this.baseURL}${this.userInfo.avatar}` })
  },
  created () {
    this.prop = this.$route.query.prop
    // console.log(this.prop)
    // 根据url中的信息判断是由哪个按钮点击过来的, 动态渲染标题
    if (this.prop === 'nickname') {
      this.title = '修改昵称'
      this.value = this.userInfo.nickname
      this.oldValue = this.userInfo.nickname
    } else if (this.prop === 'intro') {
      this.title = '修改个人简介'
      this.value = this.userInfo.intro
      this.oldValue = this.userInfo.intro
    } else if (this.prop === 'avatar') {
      this.title = '修改头像'
      this.value = this.userInfo.avatar
      this.oldValue = this.userInfo.avatar
    }
  },
  methods: {
    // 读取文件头像前的处置
    beforeRead (file) {
      // file 为vant文件上传组件自带的函数返回值
      // console.log(file)
      // 限制图片上传的格式
      var imgType =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      // 限制图片上传的大小 , file.size中返回的上传的图片大小为B ,我们需要转换成M
      var imgSize = file.size / 1024 / 1024 < 2
      if (!imgType) {
        this.$toast.fail('图片只能为jpg/png格式')
        return false
      } else if (!imgSize) {
        this.$toast.fail('图片不能大于2M')
        return false
      }
      // 只有返回true 给函数才能显示图片
      return true
    },
    // 读取文件后的处理
    async afterRead (file) {
      // 这里后台需要用formData的方式将图片上传, 所以在接口里创建formDta实例, 并将所需数据传过去
      // 传入formData所需的数据
      const res = await uploadFile(file.file)
      this.value = res.data[0].id
    },
    // 保存按钮
    async onClick () {
      // 加载效果
      this.$toast.loading('加载中...')
      // 传入参数 ,调用接口发起请求
      await editUser({ [this.prop]: this.value })
      // await editUser({ nickname: '梅梅' })
      // 调用actions方法保存用户新信息
      this.$store.dispatch('setUserInfo')
      // 修改成功效果
      this.$toast.success('修改成功')
      // 跳转到编辑资料页面
      this.$router.push('/Home/EdiUser')
      // console.log('子组件把方法传到父组件并调用了')
    }
  }
}
</script>
<style lang="less" scoped>
.Info {
  /deep/ .van-nav-bar__title {
    font-size: 18px;
  }
  .middle {
    padding: 10px 15px 0;
    /deep/.van-hairline--top-bottom::after {
      border: 0;
      background-color: #f7f4f5;
      border-radius: 8px;
    }
    /deep/ .van-field__control {
      z-index: 1;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    /deep/ .van-uploader__upload {
      width: 200px;
      height: 200px;
    }
    /deep/ .van-uploader__preview-image {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
